<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="a">

  <h3>阻止冒泡</h3>
  <div style="background-color: red; width:500px; height:500px"
    @click="clk2">
    <div style="background-color: green; width:400px; height:400px"
     v-on:click.stop="clk1()">
      <div style="background-color: blue; width:300px; height:300px; color:#dddddd"
        v-on:click.stop="nums++" @click.right="nums--">
        {{nums}}
      </div>
    </div>
  </div>


    <h3>按键后缀</h3>
    <input @keypress.enter="alert('enter')"><br>
    <input @keypress.13="alert('13')"><br>


    <h3>阻止默认行为</h3>
    <form action="https://baidu.com">
        <button @click="alert('未阻止button的默认提交行为')">提交</button>
        <button @click.prevent="alert('阻止button的默认提交行为')">提交</button>
    </form>
    <iframe name="ff"></iframe>
    <a href="https://taobao.com" target="ff">淘宝</a>
    <a href="https://taobao.com" target="ff" @click.prevent="showEvent($event)">淘宝</a>

</div>


<script>
  var v = new Vue({
      el: '#a',
      data: {
          nums: 0
      },
      methods: {
          clk1() {
              alert("div1");
          },
          clk2() {
              alert("div2");
          },
          showEvents(e) {
              console.info(e);
          }
      }
  })
</script>
</body>
</html>